<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <caption>
        title
      </caption>
      <thead>
        <tr>
          <th>1,1</th>
          <th>1,2</th>
          <th>1,3</th>
          <th>1,4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2,1</td>
          <td>2,2</td>
          <td>2,3</td>
          <td>2,4</td>
        </tr>
        <tr>
          <td>3,1</td>
          <td>3,2</td>
          <td>3,3</td>
          <td>3,4</td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td>4,1</td>
          <td>4,2</td>
          <td>4,3</td>
          <td>4,4</td>
        </tr>
      </tfoot>
    </table>

    <script>
      const table = document.body.children[0];

      // 相对表格每个部分的行索引
      console.log(table.rows[0].sectionRowIndex);
      console.log(table.rows[1].sectionRowIndex);
      console.log(table.rows[2].sectionRowIndex);
      console.log(table.rows[3].sectionRowIndex);

      // 相对表格的行索引
      console.log(table.rows[0].rowIndex);
      console.log(table.rows[1].rowIndex);
      console.log(table.rows[2].rowIndex);
      console.log(table.rows[3].rowIndex);

      // ---
      console.log(table.rows[3].cells[0].cellIndex);
      console.log(table.rows[3].lastElementChild.cellIndex);
    </script>
  </body>
</html>
